<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <title>css选择器</title>
    <style type="text/css">
        div {
            height: auto;
            padding: 20px 30px;
            margin-top: 20px;
            color: #333333;
        }
        p.title {
            color: #01B4EE;
            font-size: 18px;
        }
        /**
         * 属性选择器
         */
        [id*=select1] {
            background: red;
        }
        [id^=select1] {
            background: yellow;
        }
        [id$=select2] {
            background: #01B4EE;
        }

        /**
         * 伪类选择器
         */
        .pseudoClass{

        }
        .p_fistLine:first-line {
            color: #01B4EE;
        }
        .p_fistLetter:first-letter {
            color: #01B4EE;
        }
        .p_before:before {
            content: 'H';
            color: #01B4EE;
        }
        .p_beforeImg {
            background: #eeeeee;
            width: 200px;
            height: 80px;
            border-radius: 6px;
            padding: 10px 20px;
            position: relative;

        }
        .p_beforeImg:before {
            content: '';
            background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容没测*/
            position: absolute;
            top: -15px;
            z-index: 2;
            width: 32px;
            height: 16px;
        }
        .p_before_number>span,.p_before_letter>span {
            counter-increment: mycounter;
            display: block;
        }
        .p_before_number>span:before {
            content: '第'counter(mycounter)'种';
        }
        .p_before_letter>span:before {
            content: counter(mycounter,upper-alpha)'.';//upper-roman大写的罗马字母
        }
        .p_after:after {
            content: 'd';
            color: #01B4EE;
        }
        .p_afterImg {
            background: #eeeeee;
            width: 200px;
            height: 80px;
            border-radius: 6px;
            padding: 10px 20px;
            position: relative;

        }
        .p_afterImg:after {
            content: '';
            background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容没测*/
            position: absolute;
            bottom: -15px;
            z-index: 2;
            width: 32px;
            height: 16px;
        }
        :root {
            background: #FFFFFF;
        }
        .p_not *:not(.blue){
            color: #ee93de;
        }
        .p_empty:empty {
            background: #01B4EE;
            width: 40px;
            height: 40px;
        }
        .p_target div{
            height: 80px;
            width: 200px;
        }
        :target {
            background: #01B4EE;
            color: #FFFFFF;
        }
        .p_first-child_last-child>div:first-child {
            color: #01B4EE;
        }
        .p_first-child_last-child>div:last-child {
            color: #ee93de;
        }
        .p_nth-child_nth-last-child>div:nth-child(2) {
            color: #01B4EE !important;
        }
        .p_nth-child_nth-last-child>div:nth-last-child(2) {
            color: #ee93de !important;
        }
        .p_hover-active-focus>span:hover {
            color: #01B4EE;
        }
        .p_hover-active-focus>div:active {
            background: #01B4EE;
            color: #FFFFFF;
        }
        .p_hover-active-focus>input[type='text']:focus{
            color: #01B4EE;
        }
        .div_enabled-disabled>input[type='text']:enabled {
            color: #01B4EE;
        }
        .div_enabled-disabled>input[type='text']:disabled {
            color: #ee93de;
        }
        .p_read-only_read-write>input[type='text']:read-only {
            color: #ee93de;
        }
        .p_read-only_read-write>input[type='text']:read-write {
            color: #01B4EE;
        }
        .p_read-only_read-write>input[type='text']:-moz-read-write {
            color: #01B4EE;
        }
        .p_checked_default_indeterminate>label>input[type='checkbox']:checked {
            outline: 6px solid #01B4EE;
        }
        .p_checked_default_indeterminate>label>input[type='checkbox']:default {
            outline: 6px solid #ee93de;
        }
        .p_checked_default_indeterminate>label>input[type='radio']:indeterminate {
            outline: 6px solid #ee93de;
        }
        *::selection {
            color: #ee93de;
        }
        .brother>div~p {
            color: #01B4EE;
        }

    </style>
</head>
<body>
    <span>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</span>
    <h2>css3选择器</h2>
    <h4 class="att_selectors">属性选择器</h4>
    <pre>
        [att=val] ：属性之属性值等于val指定的字符
        [att*=val]：属性之属性值包含val指定的字符
        [att^=val]：属性之属性值开头字符为val指定的字符
        [att$=val]：属性之属性值结尾字符为val指定的字符
        <div id="select1">div id为select1</div>
        <div id="select1-1">div id为select1-1</div>
        <div id="1-select1">div id为1-select1</div>
        <div id="1-select2">div id为1-select2</div>
    </pre>
    <h4 class="att_selectors">结构性伪类选择器</h4>
    <div class="pseudoClass">
        <h5>伪元素选择器</h5>
        格式：选择器：伪元素{属性:值}  选择器 类名：伪元素{属性:值}<br/>
        css主要有以下四个伪元素选择器；<br/>

        <p class="title">1、fist-line: 伪元素用于为某个元素中的第一行文字使用样式；注意：在pre标签下将无效</p>
            <p class="p_fistLine">
                第一行内容<br/>
                fist-line:用于为某个元素中的第一行文字使用样式；注意：在pre标签下将无效
            </p>
        <p class="title">2、fist-letter: 伪元素选择器用于某个元素中的文字的首字母（欧美文字）或第一个字使用样式</p>
            <p class="p_fistLetter">
                中文（fist-letter:伪元素选择器用于某个元素中的文字的首字母（欧美文字）或第一个字使用样式
                第一个字使用样式）
            </p>
            <p class="p_fistLetter">
                English（fist-letter:伪元素选择器用于某个元素中的文字的首字母（欧美文字）或第一个字使用样式
                第一个字使用样式）
            </p>
        <p class="title">3、before: 伪元素选择器用于在某个元素之前插入一些内容 </p>
            <p class="p_before">ello Word（H是通过before添加的文字）</p>
            <p class="p_beforeImg">通过before添加三角尖图片</p>
            <div class="p_before_number">
                <span>苹果</span>
                <span>香蕉</span>
                <span>芒果</span>
            </div>
            <div class="p_before_letter">
                <span>苹果</span>
                <span>香蕉</span>
                <span>芒果</span>
            </div>
        <p class="title">4、after: 伪元素选择器用于在某个元素之后插入一些内容 </p>
            <p class="p_after">（d是通过after添加的文字）Hello Wor</p>
            <p class="p_afterImg">通过after添加三角尖图片</p>
        <p class="title">root伪类选择器:将样式绑定在页面的根元素中（是指文档最顶层结构的元素树种，html中是指包含整个页面的'html'部分）。 </p>
            <p>利用root选择器设置背景颜色为白色,</p>
        <p class="title">not伪类选择器:如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不适用这个样式时，可以使用not选择器 </p>
            <p class="p_not">
                <span class="black">字体颜色</span><br/>
                <span class="black">字体颜色</span><br/>
                <span class="blue">字体颜色黑色</span><br/>
                <span class="black">字体颜色</span><br/>
            </p>
        <p class="title">empty伪类选择器：来指定当元素内容为空白时使用的样式 </p>
            <p class="p_empty"></p>
        <p class="title">target伪类选择器: 对页面中某个target元素（该元素的id被当做页面中超链接来使用）指定样式，该样式只用在页面点击了超链接，并跳转到target元素后起作用</p>
        <p class="p_target">
            <a href="#target1">target例子1</a>
            <a href="#target2">target例子2</a>
            <div id="target1">target容器1</div>
            <div id="target2">target容器2</div>
        <p class="title">first-child选择器:第一个子元素指定样式，格式： 子元素:first-child{}</p>
        <p class="title">last-child选择器:第二个子元素指定样式，格式： 子元素:last-child{}</p>
            <div class="p_first-child_last-child">
                <div>第一</div>
                <div>第二</div>
                <div>第三</div>
            </div>
        <p class="title">nth-child选择器:格式：子元素:nth-child(n){}有一个参数，子元素正数第n个的样式</p>
        <p class="title">nth-last-child选择器:格式：子元素:nth-last-child(n){}有一个参数，子元素倒数第n个的样式</p>
            <div class="p_nth-child_nth-last-child">
                <div>第一</div>
                <div>第二</div>
                <div>第三</div>
                <div>第四</div>
                <div>第五</div>
            </div>
        <p>注意：n是从1开始计算</p>
        </p>
    </div>
    <h4 class="att_selectors">UI元素状态伪类选择器</h4>
    <div class="pseudoClass">
        <p class="title">E:hover：鼠标指针移动到元素上面时元素所使用的样式，格式：元素:hover{}</p>
        <p class="title">E:active，鼠标指针在元素上按下还未松开时元素所使用的样式，元素:active{}</p>
        <p class="title">E:focus，元素获取光标焦点时元素所使用的样式，元素:focus{}</p>
        <div class="p_hover-active-focus">
            <span>hover样式</span>
            <div>active样式</div>
            <input type="text" />
        </div>
        <p class="title">E:enabled：用来指定当前元素可用状态时的样式，格式：元素:enabled{}</p>
        <p class="title">E:disabled，用来指定当前元素不可用状态时的样式，元素:disabled{}</p>
        <div class="div_enabled-disabled">
            <input type="text" value="不可用disabled" disabled="disabled">
            <input type="text" value="可用enable" >
        </div>
        <p class="title">E:read-only{}:用来指定当前元素只读时的样式，格式：元素:read-only{}</p>
        <p class="title">E:read-write{}:用来指定当前元素非只读时的样式，格式：元素:read-write{}<p>注意：火狐浏览器需要使用-moz-read-write来兼容</p></p>
        <div class="p_read-only_read-write">
            <input type="text" value="只读read-only" readonly="readonly">
            <input type="text" value="非只读read-write、-moz-read-write" >
        </div>
        <p class="title">E:checked{}:用来指定表单中radio单选框和checkbox复选框处于选择状态时的样式，格式：元素:checked{}<p>注意：火狐浏览器需要使用-moz-checked来兼容</p></p>
        <p class="title">E:default{}:用来指定当页面打开时radio单选框和checkbox复选框处于选择状态时的样式，这些即使取消了选中也同样有样式，格式：元素:default{}</p>
        <p class="title">E:indeterminate{}:用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，一旦用户选择其中一个单选框，则该样式被取消格式：元素:indeterminate{}</p>
        <div class="p_checked_default_indeterminate">
            <label ><input type="checkbox">多选框</label>
            <label ><input type="checkbox" >多选框</label>
            <label ><input type="checkbox">多选框</label>
            <label ><input type="checkbox" checked="checked">default伪元素</label>
            <label ><input type="checkbox">多选框</label><br/>
            <label ><input type="radio" name="indeterminate">单选框</label>
            <label ><input type="radio" name="indeterminate">单选框</label>
        </div>
        <p class="title">E::selection{}:用来指定当前元素处于选中时的样式，格式：元素::selection{}</p>
    </div>
     <h4>通用兄弟元素选择器</h4>
    <pre>
        格式：
        子元素 ~ 子元素之后的同级兄弟元素 {

        }
    </pre>
    <div class="brother">
        <div>
            <p>p元素为div元素的子元素</p>
            <p>p元素为div元素的子元素</p>
            <p>p元素为div元素的子元素</p>
        </div>
        <p>p元素为div元素的兄弟元素</p>
        <p>p元素为div元素的兄弟元素</p>
        <p>p元素为div元素的兄弟元素</p>
        <div>
            <p>p元素为div元素的子元素</p>
            <p>p元素为div元素的子元素</p>
        </div>
    </div>
    <h2>css1、css2的选择器</h2>
    <p class="title">.class：用来指定对应class值相等的所有元素的样式</p>
    <p class="title">#id：用来指定对应id值相等的所有元素的样式</p>
    <p class="title">*：用来指定所有的元素的样式</p>
    <p class="title">element：用来指定对应元素相等的样式</p>
    <p class="title">元素1,元素2：用来指定元素1和元素2的样式</p>
    <p class="title">元素1 元素2：用来指定元素1内部所有的元素2的样式</p>
    <p class="title">元素1>元素2：用来指定父元素为元素1的所有的元素2的样式</p>
    <p class="title">元素1+元素2：用来指定紧接在元素1之后的第一个元素2的样式</p>
    <p class="title">[attribute]：用来指定带有 attribute 属性所有元素的样式</p>
    <p class="title">[attribute=value]：用来指定带有attribute属性值等于value所有元素的样式</p>
    <p class="title">[attribute~=value]：用来指定带有attribute属性值包含value所有元素的样式</p>
    <p class="title">[attribute|=value]：用来指定带有attribute属性值以value开头的所有元素的样式</p>
    <p class="title">:link：用来指定未访问的所有链接的样式</p>
    <p class="title">:visited：用来指定已被访问的所有链接的样式</p>
</body>
</html>